{% extends 'article/base.html' %}
{% load static %}
{% block title %}article post{% endblock %}
{% block content %}
    <div style="margin-left: 10px">
        <form class="form-horizontal" action="." method="post">
            <div class="row" style="margin-top: 10px;">
                <div class="col-md-2 text-right"><span>标题:</span></div>
                <div class="col-md-10 text-left">{{ article_post_form.title }}</div>
            </div>

            <div class="row" style="margin-top: 10px;">
                <div class="col-md-2 text-right"><span>栏目:</span></div>
                <div class="col-md-10 text-left">
                    <label for="which_column"></label><select id="which_column">
                    {% for column in article_columns %}
                        <option value="{{ column.id }}">{{ column.column }}</option>
                    {% endfor %}
                </select>
                </div>
            </div>

            <div class="row" style="margin-top: 10px">
                <div class="col-md-2 text-right"><span>文章标签:</span></div>
                <div class="col-md-10 text-left">
                    {% for article_tag in article_tags %}
                        <label class="checkbox-inline">
                            <input class="tagcheckbox" type="checkbox" id="{{ article_tag.id }}" name="article_tag"
                                   value="{{ article_tag.tag }}">{{ article_tag.tag }}
                        </label>
                    {% empty %}
                        <p>You have not type tags for articles. Please
                        <a href="{% url 'article:article_tag' %}">add your tags</a>.
                        </p>
                    {% endfor %}

                </div>
            </div>

            <div class="row" style="margin-top: 10px;">
                <div class="col-md-2 text-right"><span>内容:</span></div>
                {#            <!--div class="col-md-10 text-left">{{article_post_form.body}}</div-->#}
                <div id="editormd" class="col-md-10 text-left">
                    <label for="id_body"></label><textarea style="display:none;" id="id_body"></textarea>
                </div>
            </div>

            <div class="row text-center">
                <input type="button" class="btn btn-primary btn-lg" value="发布" onclick="publish_article()">
            </div>
        </form>
    </div>
    <script type="text/javascript" src="{% static 'js/jquery-3.2.1.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/layer.js' %}"></script>
    <link rel="stylesheet" href="{% static 'editor/css/style.css' %}"/>
    <link rel="stylesheet" href="{% static 'editor/css/editormd.css' %}"/>
    <script type="text/javascript" src="{% static 'js/json2.js' %}"></script>

    <script type="text/javascript">
        function publish_article() {
            const tags = [];
            const title = $("#id_title").val();
            const column_id = $("#which_column").val();
            const body = $("#id_body").val();
            $.each($("input[name='article_tag']:checked"), function (){tags.push($(this).val());});
            $.ajax({
                url: "{% url 'article:article_post' %}",
                type: "POST",
                data: {"title": title, "column_id": column_id, "body": body, "tags": JSON.stringify(tags)},
                success: function (e) {
                    if (e === "1") {
                        layer.msg("successful");
                        location.href = "{% url 'article:article_list' %}"
                    } else if (e === "2") {
                        layer.msg("sorry.");
                    } else {
                        layer.msg("项目名称必须写，不能为空。");
                    }
                },
            });
        }
    </script>
    <script type="text/javascript" src="{% static 'editor/editormd.min.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            const editor = editormd("editormd", {
                width: "100%",
                height: 640,
                syncScrolling: "single",
                path: "{% static 'editor/lib/.' %}",
            });
        });
    </script>
{% endblock %}